import React, { useEffect, useState } from 'react'
import Head from '../../components/Head'
import { useNavigate } from 'react-router-dom';
import { Card, Collapse, Switch } from 'react-vant';
import { Down, QuestionO, ManagerO, VolumeO, HotelO, ClusterO,PeerPay ,BagO,Passed} from '@react-vant/icons'
import axios from 'axios';

// <ManagerO  /> <VolumeO  /> <HotelO  /> <ClusterO  /> <PeerPay  /> <BagO  /> <Passed  />
import './Setup.css'
function Setup() {
    const [setup, setSetup] = React.useState([])
    const navigate = useNavigate()
    const shuju = async () => {
        const res = await axios.get('http://192.168.0.154:3000/my/setup')
        setSetup(res.data)
    }
    React.useEffect(() => {
        shuju()
    }, [])
    return (

        <>
            <Head />
            <Card style={{ width: '335px', margin: '0 auto', marginTop: '10px', backgroundColor: "rgb(220,229,240)" }}>
                <Card.Body>
                    <div style={{ display: 'flex', alignItems: 'center', color: '#3F8CFF' }} onClick={() => {
                        // 返回我的主页
                        navigate('/my')
                    }}>
                        <samp><Down rotate={90} />&nbsp;</samp><samp>返回我的主页</samp>
                    </div>

                </Card.Body>
                <Card.Header>设置</Card.Header>
            </Card>
            <Card round style={{ width: '335px', margin: '0 auto' }}>

                <Collapse initExpanded="1" accordion>
                    {
                        setup.map((item, id) => {
                            return (
                                <Collapse.Item icon={
                                    item.title==='账户'
                                    ? <ManagerO  />
                                    :item.title==='通知'
                                    ? <VolumeO  />
                                    :item.title==='我的公司'
                                    ? <HotelO  />
                                    :item.title==='链接的应用程序'
                                    ? <ClusterO  />
                                    :item.title==='支付方式'
                                    ? <PeerPay  />
                                    :item.title==='密码'
                                    ? <BagO  />
                                    :item.title==='安全'
                                    ? <Passed  />:''
                                } 
                                title={<div>{item.title}</div>} name={id} key={id}>
                                    {
                                        item.notifications.map((item1, id1) => {
                                            return (
                                                <Card round style={{ backgroundColor: '#F4F9FD', marginTop: '10px' }} className='Card-Item' >
                                                  <div style={{padding:'10px 10px 10px 10px',width:'90%',margin:'0 auto'}}>
                                                    {/* 标题 */}
                                                    <div>
                                                        <p>{item1.title}</p>
                                                    </div>
                                                    {/* 描述和开关 */}
                                                    <div style={{display:'flex',width:'100%',justifyContent:'space-between',marginTop:'10px'}}>
                                                        <div style={{width:'60%',fontSize:'12px',color:'rgb(153,153,153)'}}>
                                                        {item1.content}
                                                        </div>
                                                        <Switch defaultChecked={true} size="20px" activeColor="#3f8cff"/>
                                                    </div>
                                                  </div>
                                                </Card>
                                            )
                                        })
                                    }

                                </Collapse.Item>
                            )
                        })
                    }

                </Collapse>
            </Card>
        </>
    )
}

export default Setup
